<style src="@/css/components/table.css"></style>
<style src="@/css/components/popover.css"></style>
<style src="@/css/components/button.css"></style>
<style src="@/css/components/el-dialog.css"></style>
<style>
.training-management {
    background:#fff;
    padding:30px;
}

.training-management .add {
    box-shadow:2px 2px 5px 0px rgba(53,119,251,0.39);
}

.pages {
    margin-top:30px;
}

.cont {
    font-size:16px;
    color:#727579;
    padding:6px 0 4px;
}

.el-icon-caret-top:before,.el-icon-caret-bottom:before {
    content: ""
}

.mb20 {
    margin-bottom: 20px !important;
}
</style>
<template>
<div>
    <section class="training-management" v-if="show">
        <el-button type="primary" class="add mb20" @click="gotoPath('/training/organize')" >创建培训</el-button>

        <el-table :data="list" style="width: 100%" class="newTab first-table" @sort-change="rankFn">
            <el-table-column label="名称" min-width="16.6%">
                <template slot-scope="scope">
                    <el-popover
                        popper-class="popover"
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        :content="scope.row.TrainName">
                        <span slot="reference">{{scope.row.TrainName.substr(0,10)}}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="Lecturer" label="培训讲师" min-width="16.6%"></el-table-column>
            <el-table-column label="培训地址" min-width="33.3%">
                <template slot-scope="scope">
                    <el-popover
                        popper-class="popover"
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        :content="scope.row.Address">
                        <span slot="reference">{{scope.row.Address.substr(0,25)}}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="TrainTime"  label="培训时间" sortable="custom" min-width="16.6%" ></el-table-column>
            <el-table-column label="操作" min-width="16.6%">
            <template slot-scope="scope">
                <span class="operate" @click="deleteFn(scope.row.TrainID)" v-if="creentTab == 1 || creentTab == 3">删除</span>
                <router-link tag="span" :to="{ path: '/training/edittrain', query: { TrainID: scope.row.TrainID }}" class="operate" v-if="creentTab == 1">编辑</router-link>
                <router-link tag="span" :to="{ path: '/training/training-info', query: { id: scope.row.TrainID }}" class="operate">详情</router-link>
            </template>
            </el-table-column>
        </el-table>

        <!-- 分页区 -->
        <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage"></pageModel>

        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="deleteState"
            class="new-dialog"
            width="480px"
            :before-close="handleClose">
            <div class="cont">删除培训后，将无法恢复</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteState = false">取消</el-button>
                <el-button type="primary"  class="add" @click="deleteConfig">确 定</el-button>
            </span>
        </el-dialog>
    </section>

    <div class="training-management no-temporarily" v-else>
        <img src="../../images/ic-default.png" alt="">
        <p>即将上线，敬请期待</p>
    </div>
</div>

</template>

<script>

	import qs from 'qs'
	import qrcode from '../../../static/qr/index.js'
    import pageModel from "components/pageModel.vue"

	export default{
		data: function(){
			return {
                show:false,
                page:1,
                pagesize:10,
                total:0,
                list:[], //数据
                deleteState:false, //删除弹窗状态
                order:"desc",
                trainID:'', //获取操作id
                path:[
                    {
                        name:'培训学习',
                        path:'/study/plan-list'
                    },
                    {
                        name:'培训管理'
                    }
                ],

                tab:[
                    {
                        name: '未开始',
                        type: '1'
                    },
                    {
                        name: '进行中',
                        type: '2'
                    },

                    {
                        name: '已结束',
                        type: '3'
                    }
                ]
            }
		},
		mixins: [mixinMethods],

        watch:{
            creentTab(){
                this.page = 1
                this.getList()
            }
        },

        computed: {
            creentTab(){
                return this.$store.state.creentTab
            }
        },

        components:{
            pageModel
        },

		methods: {
            // 获取表格数据
            getList() {
                axios.post('/com/train/getList', qs.stringify({
                    page:this.page,
                    pagesize:this.pagesize,
                    order:this.order,
                    type:this.creentTab
                })).then( (res) => {
                    var d = res.data

                    if(d.flag == 1){
                        this.list = d.data.Rows
                        this.total = d.data.Total
                    }else{
                        this.$message.error(d.msg)
                    }
                })
            },

            deleteFn(trainID) {
                this.trainID = trainID
                this.deleteState = true
            },
            // 删除确定
            deleteConfig() {
                axios.post('/com/train/del', qs.stringify({
                    trainID: this.trainID
                })).then( (res) => {
                    var d = res.data
                    if(d.flag == 1){

                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })

                        this.deleteState = false
                        this.getList()
                    } else {
                        this.$message.error(d.msg)
                    }
                })
            },

            // 当前显示条数发生改变
            getPageSize(value) {
                this.pagesize = value
                this.getList()
            },

            // 当前分页改变
            getPage(value) {
                this.page = value
                this.getList()
            },

            rankFn(value) {
                this.order = (value.order  == 'ascending' ? 'asc' : 'desc')
                this.getList()
            }
		},

		mounted: function(){
            // 设置tab切换
            this.show && this.$store.commit('setTab', this.tab)


            // 设置面包屑
            this.$store.commit('setPath', this.path)

            // 设置面包屑
            this.$store.commit('setTabCur', 1)

            this.getList()

		}
	}

</script>
